import { useNavigate, Outlet } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import './index.scss'

const Main = () => {
  const navigate = useNavigate() //获取路由的实例
  const changePage = (path: string) => {
    navigate(path)
  }

  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: '/cart',
      title: '购物车',
      icon: <UnorderedListOutline />,
      badge: '5',
    },
    {
      key: '/order',
      title: '订单',
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
    {
      key: '/mine',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
  return (
    <>
      <div className='bigBox'>
        {/* 一级路由以外的路由显示的地方 */}
        <div className='content'>
          {/* 类似于router-view */}
          <div></div>
          <Outlet></Outlet>
        </div>
       <div className='tab-bar-p'>
       <TabBar onChange={changePage}>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
       </div>
      </div>
    </>
  )
}

export default Main
